<template>
  <div v-model="chapter" class="main">
    <span style="float: left; margin-left: 80px; font-family: 幼圆">
        <el-button v-show="l_show" type="text" @click="front">上一章</el-button>
      </span>
    <span style="float: right;margin-right: 80px; font-family: 幼圆">
        <el-button v-show="r_show" type="text" @click="next">下一章</el-button>
      </span>
    <div>
      <p style="font-size: 32px; text-align: center; color: orangered">{{ chapter.chapterName }}</p>
    </div>
    <div>
      <br>
      <span
        style="margin-left: 43%; font-weight: 600;color: #409EFF; font-family: 'JetBrains Mono'">更新时间：{{ chapter.updateTime }}</span>
    </div>
    <br>
    <br>
    <div v-html="chapter.chapterContext" class="text" ref="aa"></div>
  </div>
</template>

<script>
export default {
  name: "readBook",
  data() {
    return {
      bookId: 0,
      chapter: {},
      chapterList: [],
      l_show: false,
      r_show: false,
    }
  },
  created() {
    const query = this.$route.query;
    this.chapter = query.chapter;
    this.bookId = query.bookId;
    this.getChapterListByBookId(this.bookId);
    this.getDetailById(this.chapter.id);
  },
  methods: {
    scrollToBottom() {
      // 定位到顶部
      let chatRoom = this.$refs.aa    //通过$refs获取到该元素
      chatRoom.scrollTop = 0
    },
    front() {
      let id = this.chapter.id - 1 < this.chapterList[0] ? this.chapter.id : this.chapter.id - 1;
      this.getDetailById(id);
      this.l_show = id !== this.chapterList[0];
      this.r_show = id !== this.chapterList[this.chapterList.length- 1];
    },
    next() {
      let id = this.chapter.id + 1 > this.chapterList[this.chapterList.length - 1] ? this.chapter.id : this.chapter.id + 1;
      this.getDetailById(id);
      this.r_show = id !== this.chapterList[this.chapterList.length - 1];
      this.l_show = id !== this.chapterList[0];
    },
    getChapterListByBookId(bookId) {
      this.$axios.post("/chapter-message/list", {
        "bookId": bookId
      }).then(res => {
        if (res.data.code === '200') {
          this.r_show = true
          this.l_show = true
          this.chapterList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    getDetailById(id) {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (!token) {
        this.$message.warning("请先登录！");
        this.$router.push("/login");
      } else {
        this.$axios.post("/chapter-message/detail", {
          id: id
        }, {
          headers: {
            "token": token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.chapter = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
      this.scrollToBottom();
    }
  }
}
</script>

<style scoped>
.text {
  text-indent: 50px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 49px;
  padding-left: 150px;
  padding-right: 150px;
  height: 695px;
  overflow-y: auto;
}

.el-button {
  font-size: 30px;
}

.main {
  background-image: url('../../../static/read.png');
  background-repeat: repeat-y;
  background-size: 100%;
}
</style>
